<template>
  <div class="verification">
    <back></back>
    <div class="title">输入验证码</div>
    <div class="sent">
      <span>已发送4位验证码至</span>
      <span>{{ phone }}</span>
    </div>
    <!-- 验证码 开始-->
    <div id="app" class="code">
      <div class="captcha">
        <van-password-input
          :value="value"
          info="验证码为 4 位数字"
          :length="4"
          :gutter="10"
          :error-info="errorInfo"
          :focused="showKeyboard"
          @focus="showKeyboard = true"
        />
        <van-number-keyboard
          v-model="value"
          :show="showKeyboard"
          @blur="showKeyboard = false"
        />
      </div>
    </div>
    <!-- 按钮 -->
    <button class="button" :disabled="disabled" @click="sendcode">
      {{ btntxt }}
    </button>
    <!-- 验证码 结束 -->
  </div>
</template>

<script>
export default {
  props: ["phone"],
  data() {
    return {
      disabled: false,
      time: 5,
      btntxt: "确定",
      value: "",
      errorInfo: "",
      showKeyboard: true,
    };
  },
  watch: {
    value(value) {
      if (this.value.length == 4) {
        // 开始验证手机号是否注册
        this.axios.get("/user/checkphone/" + this.phone,).then((result) => {
          if (result.data.msg == "ok") {
            // 如果手机号已注册开始执行登录
            this.axios.post("/api/login", `phone=${this.phone}&code=${this.value}`).then((result) => {
              if (result.data.msg == "ok"){
                let un = result.data.result;
                this.$store.commit("loginOK", un);
                sessionStorage.setItem("islogin", "true");
                sessionStorage.setItem("uid", un.uid);
                sessionStorage.setItem("phone", un.phone);
                sessionStorage.setItem("uname", un.uname);
                sessionStorage.setItem("gender", un.gender);
                sessionStorage.setItem("area", un.area);
                sessionStorage.setItem("autograph", un.autograph);
                sessionStorage.setItem("avatar", un.avatar);
                this.$router.push(`/index`);
              }
            })
          }else{
            // 否则执行登录
            this.axios.post("/api/register", `phone=${this.phone}&code=${this.value}`).then((result) => {
              if (result.data.msg == "ok"){
                this.axios.post("/api/login", `phone=${this.phone}&code=${this.value}`).then((result) => {
                  if (result.data.msg == "ok"){
                    let un = result.data.result;
                    this.$store.commit("loginOK", un);
                    sessionStorage.setItem("islogin", "true");
                    sessionStorage.setItem("uid", un.uid);
                    sessionStorage.setItem("phone", un.phone);
                    sessionStorage.setItem("uname", un.uname);
                    sessionStorage.setItem("gender", un.gender);
                    sessionStorage.setItem("area", un.area);
                    sessionStorage.setItem("autograph", un.autograph);
                    sessionStorage.setItem("avatar", un.avatar);
                    this.$router.push(`/index`);
                  }
                })
              }else{
                this.errorInfo = "验证码错误";
              }
            })
          }
        })
      }
    },
  },
  mounted() {
    this.sendcode();
  },
  methods: {
    // 倒计时
    sendcode() {
      this.axios.post("/api/get_sms", `phone=${this.phone}`);
      this.time = 60;
      this.timer();
    },
    //发送手机验证码倒计时
    timer() {
      if (this.time > 0) {
        this.disabled = true;
        this.time--;
        this.btntxt = this.time + "秒";
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        this.btntxt = "发送验证码";
        this.disabled = false;
      }
    },
  },
};
</script>

<style>
/* 返回 */
.verification {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #fcfcfc;
}
/* 标题 */
.verification .title {
  font-size: 24px;
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translate(-110%, 0);
}
.verification .sent {
  font-size: 16px;
  width: 320px;
  position: fixed;
  top: 27%;
  left: 50%;
  transform: translate(-50%, 0);
}
.verification .sent > :last-child {
  color: #999;
  margin-left: 5px;
}
/* 验证码 */
.verification .code {
  width: 100%;
  margin-top: 60%;
}
.verification .captcha {
  width: 90%px;
  display: flex;
  justify-content: center;
}
.verification .van-password-input__item {
  width: 50px;
  background-color: #eee;
}
/* 确定按钮 */
.verification .button {
  width: 250px;
  height: 40px;
  border-radius: 40px;
  margin-top: 50px;
  border: 0;
  background-color: rgba(0, 150, 255, 0.5);
  font-size: 16px;
  color: #fff;
}
</style>
